<template>
  <div>
    <Adver></Adver>
    <div class="mine">我的购物车</div>
    <ul>
      <li
        v-for="item in items"
      >
      <tr>
          <td><img :src="item.image_url" alt=""></td>
          <td>{{item.product_name}}</td>
          <td class="line">￥{{item.selling_price}}</td>
          <td class="line"><van-stepper v-model="item.quantity" theme="round" button-size="22" disable-input /></td>
          <!-- <td class="line"><button class="click">+</button>{{item.quantity}}<button class="click">-</button></td> -->
          <td class="line">￥{{item.selling_price * item.quantity}}</td> 
          <!-- <td class="line"> -->
            <!-- <van-checkbox-group v-model="result" ref="checkboxGroup">
              <van-checkbox name="a"></van-checkbox>
            </van-checkbox-group> -->
          <!-- </td> -->
        </tr>
      </li>
      <!-- <van-button type="primary" @click="checkAll">全选</van-button>
      <van-button type="info" @click="toggleAll">反选</van-button> -->
    </ul>
    <van-submit-bar :price="totalprice * 100"  button-text="提交订单" @submit="onSubmit">
    </van-submit-bar>
    <!-- <div class="totalprice" v-if="totalprice > 0">总价: {{totalprice}}</div>
    <div class="computer" @click="handleClick">结算</div> -->
  </div>
</template>

<script>
import Vue from 'vue';
import { SubmitBar,Stepper,Checkbox,CheckboxGroup} from 'vant';
Vue.use(SubmitBar);
Vue.use(Stepper);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { mapState, mapGetters } from 'vuex'
import Adver from '../home/advertisement/adver.vue'
export default {
  computed: {
    ...mapState('cart', ['items']),
    ...mapGetters('cart', ['totalprice'])
  },
  components:{
    Adver
  },
  methods: {
     onSubmit(){
      this.$router.push("/scan")
    }
  },
}
</script>

<style lang='stylus' scoped>
@import "../../assets/ellipsis.styl"
@import "../../assets/border.styl"
.click
  width .2rem
  height .2rem
  position absolute
.mine
  font-size .2rem
  border_1px(0 0 1px 0)
  line-height .3rem
  padding-bottom .2rem
li 
  margin-bottom .1212rem
img
  width .675rem
  height .630rem
tr
  display flex
  justify-content space-between
  td
    width 20%
    ellipsis(100%)
    text-align center
  .line
    line-height .63rem
    position relative
.totalprice
  font-size .3rem
  color red
.computer
  font-size .3rem
  width 1rem
  height .6rem
  background-color red
  text-align center
  line-height .6rem
  border-radius .2rem
  color white
</style>
<style lang='stylus'>
.van-checkbox__icon
  margin-left .4rem
.van-checkbox
  margin-top .2rem
</style>